<template>
    <div class="app-container">
         <ul>
             <li class="title">
                 <span>键</span><span>值</span>
             </li>
             <li v-for="(item,index) in data2" :key="index"><span>{{index}}</span><span>{{item}}</span></li>
         </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            data2: [],
            option:{
                width: '80%',
                menu: false,
                menuWidth: '240px',
                addBtn: false,
                border: true,
                stripe: false,
                column:[
                    {
                        label:'名称',
                        prop:'a'
                    },
                    {
                        label:'value',
                        prop:'ps'
                    },
                    {
                        label:'value',
                        prop:'e'
                    },
                    {
                        label:'value',
                        prop:'f'
                    },
                    {
                        label:'value',
                        prop:'v'
                    },
                    {
                        label:'value',
                        prop:'pf'
                    },
                    {
                        label:'value',
                        prop:'pjs'
                    },
                    {
                        label:'value',
                        prop:'qjs'
                    },
                    {
                        label:'value',
                        prop:'ts'
                    }
                ]
            },
            stompClient: "",
        }
    },
    props: ['deviceId'],
    created () {
        // 初始化
        this.init2()
    },
    methods:{
        init2() {
        this.ws = new WebSocket("ws://localhost:8080"+"/ws/device/"+this.deviceId)
                
        //监听是否连接成功
        this.ws.onopen = ()=> {
             console.log('ws连接状态：' +this.ws.readyState);
             //连接成功则发送一个数据
             this.ws.send('连接成功');
          }
          
        //接听服务器发回的信息并处理展示
        this.ws.onmessage = (message)=> {  
            let jsonResponse = JSON.parse(message.data);
            console.log('遥测数据值',jsonResponse)
            delete jsonResponse.deviceId
            this.data2 = jsonResponse 
         }
         
         //监听连接关闭事件
         this.ws.onclose = ()=>{
            //监听整个过程中websocket的状态
            console.log('ws连接状态：' + this.ws.readyState);
         }
         
         //监听并处理error事件
         this.ws.onerror = function(error) {
            console.log(error);
         }
        },
        beforeDestroy: function () {
        // 页面离开时断开连接,清除定时器
        this.disconnect();
        }
    },
}
</script>
<style lang="scss" scoped>
.app-container{
    ul{
        border: solid 1px #ddd;
        margin: 0 20px;
        li{
         width: 100%;
         height: 50px;
         line-height: 50px;
         //padding: 10px 16px 8px;
         background: #fff;
         border-radius: 2px;
         transition: all 0.3s; 
         border-top: solid 1px #ddd;
         color: #333;
         &.title{
             color: #333;
             font-weight: bold;
             border: none;
         }
         span{
             width: 50%;
             line-height: 50px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             display: inline-block;
             text-align: center;
             margin: 0;
             &:first-child{
                 border-right: solid 1px #ddd
             }
             .btn{
                 color: #666;
                 font-size: 18px;
                 font-weight: bold;
             }
         }
        }
    }
}
</style>